---
title: "Accessibility Checker Rule Help: WCAG20_Body_FirstASkips_Native_Host_Sematics"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### Who does this affect?

* Blind people using screen readers
* People with low vision using a screen reader
* People who rely on keyboard control

### Why is this important?

The skip to main link or an element with the `"main"` role allows people who use only a keyboard to skip over content that is repeated on several pages such as, banners and navigation menus and quickly navigate to the main content.

</Column>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

<div id="locLevel"></div>

### The web page does not provide a way to quickly navigate to the main content
Web pages must provide a way to skip directly to the main content

[IBM 2.4.1 Bypass Blocks](http://www.ibm.com/able/guidelines/ci162/bypass_blocks.html) | [ARIA Practices 1.1 Main Landmark ](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html)

<div id="locSnippet"></div>

### What to do

 * Enclose the main content in a `<main>` element;
 * OR, enclose the main content in an element with the `"main"` landmark role (e.g. `<div role="main">`);
 * OR, have a first link on each page that skips to the main content.

For example:

<CodeSnippet type="multi" light={true}>&lt;body&gt;
	&lt;!-- ... --&gt;
	&lt;div role="banner"&gt;&lt;!-- Banner Content --&gt;&lt;/div&gt;
	&lt;!-- ... --&gt;
	&lt;div role="navigation"&gt;&lt;!-- Navigation Menu --&gt;&lt;/div&gt;
	&lt;!-- ... --&gt;
	&lt;div role="main"&gt;&lt;!-- Main Content --&gt;&lt;/div&gt;
	&lt;!-- Remainder of page --&gt;
&lt;/body&gt;</CodeSnippet>


</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)